<template>
  <li class="io">
    <div class="tu">
      <img :src="cakeimage" alt="">
    </div>
    <div class="ui">
      <p class="t1">{{cakename}}</p>
      <p class="t2">{{brandname}}</p>
      <p class="t3">{{cakeprice}}<span class="xian">原价{{cakeoriginal}}</span></p>
      <div class="fix">
        <span class="rec"><i class="num">{{rec}}</i>人评价</span>
        <span class="zao"><i class="iconfont icon-daishouhuo-01"></i>{{send}}</span>
      </div>
    </div>
  </li>
</template>

<script>
export default {
   props:{
        cakeimage:String,
        cakename:String,
        brandname:String,
        cakeprice:String,
        cakeoriginal:String,
        rec:String,
        send:String
    }
}
</script>

<style scoped>
li{
  display: inline-block;
  width: 48%;
  height: 3rem;
  background-color: white;
  margin-left: 0.05rem;
  margin-bottom:0.05rem
  /* font: left sans-serif; */
}
.tu{
  width: 1.66rem;
  height: 1.66rem;
}
.tu img{
  width: 100%;
  height: 100%;
}
.ui{
  padding: .06rem;
    min-height: 0.56rem;
}
.t1,.t2{
  overflow: hidden;
  text-align: left;
    text-overflow: ellipsis;
    height: 0.2rem;
     font-size: 0.13rem;
    line-height: 0.2rem;
}
.t2{
  color: #666;
    font-size: 0.1rem;
    line-height: 0.13rem;
    height: 0.13rem;
    
}
.t3{
  color: #f0460e;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    font-size: 0.13rem;
    height: 0.2rem;
    line-height: 0.2rem;
}
.xian{
  text-decoration: line-through;
    color: #B8B8B8;
    display: inline-block;
    margin-left: .05rem;
}
.fix{
  font-size: 0.1rem;
    color: #B8B8B8;
}
.rec{
  float: left;
}
.zao{
  float: right;
}
.zao .iconfont{
  color: red;
}

</style>